<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div{width: 300px;height: 100px;background: red;border: 1px solid #000;display: none;}
		input{background: #ccc;}
		.active{background: yellow;}
	</style>
	<body>
		<input type="button" value="按钮1">
		<input type="button" value="按钮2">
		<input type="button" value="按钮3">
		<input type="button" value="按钮4">

		<div class="div" style="display:block;">内容a</div>
		<div class="div">内容b</div>
		<div class="div">内容c</div>
		<div class="div">内容d</div>
	</body>
	<script type="text/javascript">
		//思路   清空所有的   加载当前的
		
		var aBtn = document.getElementsByTagName("input");
		var aDiv = document.getElementsByTagName("div");
		
		
		// for (var i = 0; i < aBtn.length; i++) {
		// 	aBtn[i].index = i;
		// 	aBtn[i].onclick = function () {
		// 		for (var j = 0; j < aDiv.length; j++) {
		// 			aDiv[j].style.display =  "none";
		// 			aBtn[j].style.background = "";
		// 		}
		// 		aDiv[this.index].style.display =  "block";
		// 		aBtn[this.index].style.background = "yellow"
		// 	}
		// }
		
		
		
		/*	*/
		for (var i = 0; i < aBtn.length; i++) {
			function out() {
				var x = i;
					return function () {
						for (var j = 0; j < aDiv.length; j++) {
						aDiv[j].style.display =  "none";
						aBtn[j].style.background = "";
					}
					aDiv[x].style.display =  "block";
					aBtn[x].style.background = "yellow"
				}
			}			
			aBtn[i].onclick = out();
		}
	
		
	</script>
</html>
